<template>
  <div class="sidebar-box">
    <el-button class="is-collapse-btn" @click="isCollapse = !isCollapse">{{ isCollapse ? '展开' : '收起' }}</el-button>
    <el-menu default-active="1-4-1"
             class="el-menu-vertical-demo"
             background-color="#FAFAFA"
             @open="handleOpen" @close="handleClose"
             :collapse="isCollapse">
      <div class="avatar-box" v-show="!isCollapse">
        <img src="../assets/img/login-logo.png" alt="" class="hove-cursor">
        <div class="avatar-right">
            <span v-if="shared?.user?.username" style="margin-right: 5px;">{{shared?.user?.username}}</span>
            <i class="el-icon-bell hove-cursor">
              <el-badge :value="message" class="is-dot"></el-badge>
            </i>
          <el-popover
            placement="bottom"
            width="400"
            offset="10"
            trigger="hover">
            <el-menu
              default-active="2"
              @open="handleOpen"
              @close="handleClose">
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">数据统计</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-setting"></i>
                <span slot="title">账号设置</span>
              </el-menu-item>
              <el-menu-item index="4" @click="$router.push({name:'login'})">
                <i class="el-icon-document"></i>
                <span slot="title" >退出登录</span>
              </el-menu-item>
            </el-menu>
            <el-avatar slot="reference" size="large" :src="circleUrl" class="hove-cursor"></el-avatar>
          </el-popover>
        </div>
      </div>
      <div class="search-box"  v-show="!isCollapse">
        <i class="el-icon-search"></i>
        <input type="text" class="note-input" v-model="search" style="padding-left:30px" placeholder="搜索"  @keyup.enter="$router.push({name:'noteList',query:search})"/>
<!--        <i class="el-icon-circle-plus-outline"></i>-->
        <el-button class="new-btn">+</el-button>
      </div>
      <el-menu-item index="1" @click="$router.push('NoteEditor')">
        <i class="el-icon-menu"></i>
        <span slot="title">开始</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-star-off"></i>
        <span slot="title">收藏</span>
      </el-menu-item>
      <el-submenu index="3">
        <template slot="title" >
          <i class="el-icon-s-management"></i>
          <span >文件</span>
        </template>
        <el-menu-item index="3-1" @click="$router.push('fileResource')" >资源库</el-menu-item>
        <el-menu-item index="2-2" @click="$router.push('folder')" >文件夹</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      isCollapse: true,
      circleUrl: require("../assets/img/avatar.png"),
      search: "",
      message:1,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  watch:{
    isCollapse(val){
       this.$emit('changeCollapse', val);
    }
  }
}
</script>

<style lang="less">
@import "../assets/css/sidebar.less";
.sidebar-box {
  height: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  .sidebar-box .el-menu .el-menu-item{
    font-size: unset;
  }
  // 侧边栏展开时的样式
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 320px;
    min-height: 400px;
    text-align: left; // 添加这一行
  }
  .el-menu-item,.el-submenu{
    font-size:16px;
    font-weight: 400;
    margin-bottom: 8px;
    .el-submenu__title{
      margin-top: 0;
      font-size:16px;
      font-weight: 400;
    }
    .el-menu{
      margin-top: 0;
      font-size:16px;
      font-weight: 400;
    }
  }
  .is-collapse-btn {
    position: absolute;
    right: 0;
    border: none;
  }
  .el-menu-vertical-demo {
    margin-top: 50px;
    border-right: none;

    .avatar-box{// 头像盒子
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100px;
      padding: 0 10px;
      img{
        margin-top: -6px;
        height: 40px;
        object-fit: cover;
      }
      .avatar-right{
        display: flex;
        align-items: center;
        justify-content: center;
        i{
          position: relative;
          font-size: 24px;
          margin-right: 18px;
          .is-dot{
            position: absolute;
            top: -5px;
            left: 10px;
          }
        }
        .el-avatar{
          display: block;
        }
      }
    }

    .search-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding: 0 10px;
      .el-icon-search{
        position: absolute;
        font-size: 22px;
        left: 20px;
        color: #92959B;
      }
      .el-icon-circle-plus-outline{
        position:absolute;
        font-size: 22px;
        color: #92959B;
        right: 20px;

      }
      .new-btn{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        width: 32px;
        height: 32px;
      }
    }
  }
}

</style>
